<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作文本</title>
    <!--    引入jquery-->
    <script src="../../js/jquery-3.3.1.js"></script>
</head>
<body>

<div id="div1">
    <h1 id="div_h1">人生只售单程票，过去的就过去了，更重要的是走好后面的路。</h1>
    <hr>
    <button id="div_btn1">点击我试试</button>
</div>

<script>
    /**
     * dom操作
     * 是对dom元素进行操作，简单理解，就是对在页面中已经存在的标签进行操作。比如动态添加某个标签
     * 在以前的jsp学习中，动态渲染数据库中的数据到页面上，那种样式就是对dom元素的动态添加
     * 所以有了dom操作后，我们可以对元素的控制性更加的灵活
     */

    /**
     * 需求：得到id是div_h1中的内容，控制台输出
     * html：可以解析dom标签，默认是得到改标签中的内容
     * val：得到val值，是一个方法
     * value：和val类似，一定要注意，jquery中的value和value（）方法，得到内容一般是使用value属性
     * text：得到文本内容
     */

    let div_h1_html = $('#div_h1').html();
    let div_h1_val = $('#div_h1').val();
    let div_h1_value = $('#div_h1').value;
    let div_h1_text = $('#div_h1').text();
    console.log("div_h1_html："+div_h1_html)
    console.log("div_h1_val："+div_h1_val)
    console.log("div_h1_value："+div_h1_value)
    console.log("div_h1_text："+div_h1_text)

    /**
     * 需求:将id是div_h1中的内容修改为“过去的不想在回忆，只想要记住现在的自己。”
     * 这种修改的标签，其实就是在操作dom元素了
     * 但是一般我们都不会用text方法来操作，而是用html方法，因为html可以解析标签
     */
    // $('#div_h1').text('过去的不想在回忆，只想要记住现在的自己。')
    $('#div_h1').html('过去的不想在回忆，只想要记住现在的自己。')

    /**
     * 1.添加dom元素
     * 需求：点击按钮，动态添加一个句子
     * 思路：
     *  a.点击按钮，需要写点击时间
     *  b.动态添加，需要动态添加dom元素，则需要用到html方法
     * 注意：
     *  a.这里的伪选择器可以看成是替换，一定要看清替换的位置，我这里替换的是已经存在的id是div_h1的元素
     *  b.也可以看成是添加，伪选择器是父类容器
     */
    $('#div_btn1').click(function () {
        $('#div_h1').html("<h1>谁都向往黄金般的日子，但它来得迟；只有不怕付出，它才会向你走来。</h1>")
    })

</script>
</body>
</html>